<template>
  <div>
    <el-card class="box-card"
             v-if="$route.path != '/info/zlsz/uptPass'">
      <div slot="header"
           class="clearfix">
        <span>基本资料</span>
      </div>
      <div class="text item">
        <el-form :label-position="labelPosition"
                 label-width="90px">
          <el-form-item label="头像">
            <el-row v-if="isIconShow">
              <el-col :xs="14"
                      :sm="14"
                      :md="12"
                      :lg="12"
                      :xl="12"
                      v-if="!wechatState">
                <el-avatar v-if="userInfo.headImgUrl != null"
                           class="avatar"
                           :size="60"
                           :src="userInfo.headImgUrl">111</el-avatar>
                <el-avatar v-else
                           class="avatar"
                           :size="60"
                           :src="circleUrl"></el-avatar>
              </el-col>
              <el-col :xs="14"
                      :sm="14"
                      :md="12"
                      :lg="12"
                      :xl="12"
                      v-else>
                <el-avatar v-if="userInfo.wxHeadImgUrl != null"
                           class="avatar"
                           :size="60"
                           :src="userInfo.wxHeadImgUrl">111</el-avatar>
                <el-avatar v-else
                           class="avatar"
                           :size="60"
                           :src="circleUrl"></el-avatar>
              </el-col>
              <el-col :xs="10"
                      :sm="10"
                      :md="12"
                      :lg="12"
                      :xl="12">
                <el-button v-if="wechatState"
                           disabled
                           size="small"
                           @click="isIconShow = !isIconShow">修改</el-button>
                <el-button v-else
                           size="small"
                           @click="isIconShow = !isIconShow">修改</el-button>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :xs="14"
                      :sm="14"
                      :md="12"
                      :lg="12"
                      :xl="12">
                <el-upload class="avatar-uploader"
                           action="https://api.zhubaba.cn/oss/upLoad"
                           :headers="uploadHeaders"
                           :show-file-list="false"
                           :on-success="handleAvatarSuccess">
                  <img v-if="imageUrl"
                       :src="imageUrl"
                       class="avatar" />
                  <i v-else
                     class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-col>
              <!-- <el-col :xs="10" :sm="10" :md="12" :lg="12" :xl="12">
                  <el-button size="small">上传</el-button>
                </el-col> -->
            </el-row>
          </el-form-item>
          <el-form-item label="用户名">
            <el-row v-if="isUserName">
              <el-col :xs="14"
                      :sm="14"
                      :md="12"
                      :lg="12"
                      :xl="12"
                      v-if="!wechatState">
                {{
                                    userInfo.nickName == null
                                        ? "name"
                                        : userInfo.nickName
                                }}
              </el-col>
              <el-col :xs="14"
                      :sm="14"
                      :md="12"
                      :lg="12"
                      :xl="12"
                      v-else>
                {{
                                    userInfo.wxNickName == null
                                        ? "name"
                                        : userInfo.wxNickName
                                }}
              </el-col>
              <el-col :xs="10"
                      :sm="10"
                      :md="12"
                      :lg="12"
                      :xl="12">
                <el-button v-if="wechatState"
                           disabled
                           size="small"
                           @click="isUserName = !isUserName">修改</el-button>
                <el-button v-else
                           size="small"
                           @click="isUserName = !isUserName">修改</el-button>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :xs="14"
                      :sm="14"
                      :md="12"
                      :lg="12"
                      :xl="12">
                <el-input style="width:98%;"
                          v-model="userInfo.nickName"
                          size="small"
                          placeholder="请输入需要修改的用户名"></el-input>
              </el-col>
              <el-col :xs="10"
                      :sm="10"
                      :md="12"
                      :lg="12"
                      :xl="12">
                <el-button size="small"
                           @click="replaceSubmit">修改</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="邮箱地址">
            <el-row v-if="isEmail">
              <el-col :xs="14"
                      :sm="14"
                      :md="12"
                      :lg="12"
                      :xl="12">
                {{
                                    userInfo.email == null
                                        ? "邮箱地址"
                                        : userInfo.email
                                }}
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-row v-if="isPhone">
              <el-col :xs="14"
                      :sm="14"
                      :md="12"
                      :lg="12"
                      :xl="12">
                {{
                                    userInfo.mobile == null
                                        ? "手机号码"
                                        : userInfo.mobile
                                }}
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="第三方账号">
            <el-row v-if="isPhone">
              <el-col :xs="14"
                      :sm="14"
                      :md="12"
                      :lg="12"
                      :xl="12"
                      class="nth_frees">
                <!-- <span><img :src="githubGary" alt=""/></span> -->
                <span><img :src="
                                            !wechatState
                                                ? wechat
                                                : wechat_active
                                        "
                       alt="" /></span>
                <!-- <span><img :src="qqImg" alt=""/></span> -->
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="会员到期时间"
                        label-width="100px"
                        v-if="userInfo.vipEndTime">
            <el-row>
              <el-col :xs="24"
                      :sm="14"
                      :md="12"
                      :lg="12"
                      :xl="12"
                      class="nth_frees">
                <!-- <span><img :src="githubGary" alt=""/></span> -->
                {{userInfo.vipEndTime | formatDate}}
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <div v-else>
      <router-view></router-view>
    </div>
    <clientBtn></clientBtn>
  </div>
</template>

<script>
import icons from "@/assets/images/avatar/img1.png"

import githubGary from "@/assets/images/github.png"
import githubOrg from "@/assets/images/githubOrg.png"
import wechat from "@/assets/images/wechat.png"
import wechat_active from "@/assets/images/wechat_active.png"
import qqImg from "@/assets/images/qq.png"
import qq_active from "@/assets/images/qq_active.png"
import clientBtn from '../../components/clientBtn'
import {
  formatDate
} from "@/util/util.js"
export default {
  components: {
    clientBtn
  },
  filters: {
    formatDate (time) {
      var date = new Date(time);
      return formatDate(date, 'yyyy年MM月dd日 hh:mm');
    }
  },
  data () {
    return {
      userInfo: "",
      labelPosition: "left",
      circleUrl: icons,
      imageUrl: "",
      isIconShow: true,
      isUserName: true,
      isEmail: true,
      isPhone: true,
      githubGary: githubGary,
      githubOrg: githubOrg,
      wechat: wechat,
      wechat_active: wechat_active,
      qqImg: qqImg,
      qq_active: qq_active,
      wechatState: null,
      uploadHeaders: {
        'user-session': JSON.parse(localStorage.getItem("key"))
      },
    }
  },
  mounted () {
    this.wechatState = sessionStorage.getItem('wechat');
    _MEIQIA('hidePanel');
    console.log(this.wechatState, '第三方登录状态')
  },
  methods: {
    replaceSubmit () {
      this.isUserName = !this.isUserName;
      console.log(';;;');
      this.$ajax.post('user/setInfo', {
        nickName: this.userInfo.nickName,
        session: JSON.parse(localStorage.getItem("key"))
      }).then(res => {
        console.log(res, '修改昵称')
        this.init();
      }).catch(err => {
        console.log(err, '异常')
      })
    },
    handleAvatarSuccess (res, file) {
      console.log(res, file);
      if (res.code == 0) {

        this.userInfo.headImgUrl = res.data;
        this.$message.success('修改成功')
        this.$ajax.post('user/setInfo', {
          headImgUrl: res.data,
          session: JSON.parse(localStorage.getItem("key"))
        }).then(res => {
          console.log(res, '上传图片');
          this.init();
        }).catch(err => {
          console.log('上传失败')
        })

        this.isIconShow = true;
      } else {
        this.$message.error(res.msg)
      }

    },
    init () {
      // if (sessionStorage.getItem("info")) {
      //     console.log('888')
      //     this.userInfo = JSON.parse(sessionStorage.getItem("info"));
      // } else {
      console.log('999')
      this.$ajax.post("/user/getInfo")
        .then(res => {
          this.userInfo = res.data.data;
        })
      // }

    },
  },
  created () {
    this.init();
  }
}
</script>

<style lang="scss" scoped>
.nth_frees span {
  display: inline-block;
  margin-right: 15px;
}
.nth_frees span + span {
  margin-right: 15px;
}
.nth_frees span img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.avatar-uploader {
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.avatar {
  width: 60px;
  height: 60px;
  display: block;
}
// .el-form-item{
//   display: flex;
//   align-items: center;
// }
// .el-form-item__content{
//   margin-left: 0;
// }
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>